<style lang="less">
.index {
  .el-row {
    margin: 15px 0;
  }
  .el-carousel__item {
    &:nth-child(2n) {
      background-color: #99a9bf;
    }
    &:nth-child(2n + 1) {
      background-color: #d3dce6;
    }
    h3 {
      color: #475669;
      font-size: 18px;
      opacity: 0.75;
      text-align: center;
      line-height: 150px;
      margin: 0;
    }
  }
  .item {
    margin-top: 10px;
    margin-right: 40px;
  }
}
</style>

<template>
  <div class="index">
    <el-alert :title="'Hello '+ msg" description="Alert详细信息" type="success" show-icon></el-alert>
    <el-row>
      <el-col :span="12">
        <el-input>
          <template slot="prepend">http://</template>
        </el-input>
      </el-col>
      <el-col :span="12">
        <el-input>
          <template slot="append">.com</template>
        </el-input>
      </el-col>
    </el-row>
    <el-row :gutter="12">
      <el-col :span="6">
        <el-input placeholder="请输入内容" v-model="value3">
          <el-select v-model="select1" slot="prepend" placeholder="请选择" style="width:110px">
            <el-option label="餐厅名" value="1"></el-option>
            <el-option label="订单号" value="2"></el-option>
            <el-option label="用户电话" value="3"></el-option>
          </el-select>
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </el-col>
      <el-col :span="6">
        <el-input placeholder="请选择日期">
          <i slot="suffix" class="el-input__icon el-icon-date"></i>
        </el-input>
      </el-col>
      <el-col :span="6">
        <el-input placeholder="请输入内容" :span="6">
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
      </el-col>
      <el-col :span="6">
        <el-select placeholder="请选择" v-model="select2">
          <el-option label="111" value="1"></el-option>
        </el-select>
      </el-col>
    </el-row>
    <el-row>
      <el-button type="primary">
        <router-link to="/login" tag="span">Login</router-link>
      </el-button>
      <el-button type="text">
        <router-link to="/hello">Hello</router-link>
      </el-button>
    </el-row>
    <el-row>
      <el-radio v-model="radio" label="1">单选1</el-radio>
      <el-radio v-model="radio" label="2">单选2</el-radio>
      <el-checkbox>多选</el-checkbox>
      <el-button-group>
        <el-button type="primary" icon="el-icon-arrow-left" size="mini">上一页</el-button>
        <el-button type="primary" size="mini">下一页
          <i class="el-icon-arrow-right el-icon--right"></i>
        </el-button>
      </el-button-group>
      <el-button type="primary" icon="el-icon-search" round disabled>test</el-button>
      <el-date-picker v-model="date" type="date" placeholder="选择日期"> </el-date-picker>
      <el-date-picker v-model="date" type="datetime" placeholder="选择日期"> </el-date-picker>
      <el-switch v-model="value1" active-text="active" inactive-text="inactive">
      </el-switch>
      <el-switch v-model="value2" active-color="#13ce66" inactive-color="#ff4949">
      </el-switch>
    </el-row>
    <el-row>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="3256">
      </el-pagination>
    </el-row>
    <el-row>
      <el-steps :active="1" finish-status="success" simple style="margin-top: 20px">
        <el-step title="步骤 1"></el-step>
        <el-step title="步骤 2"></el-step>
        <el-step title="步骤 3"></el-step>
      </el-steps>
    </el-row>
    <el-row>
      <el-carousel height="150px" :interval="4000" type="card">
        <el-carousel-item v-for="item in 4" :key="item">
          <h3>{{ item }}</h3>
        </el-carousel-item>
      </el-carousel>
    </el-row>
    <el-row>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>活动管理</el-breadcrumb-item>
        <el-breadcrumb-item>活动列表</el-breadcrumb-item>
        <el-breadcrumb-item>活动详情</el-breadcrumb-item>
      </el-breadcrumb>
    </el-row>
    <el-row>
      <el-tabs v-model="activeName">
        <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
        <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
        <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
        <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
      </el-tabs>
    </el-row>
    <el-row>
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
        <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
        <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
        <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
      </el-tabs>
    </el-row>
    <el-row>
      <el-badge :value="12" class="item">
        <el-button size="small">评论</el-button>
      </el-badge>
      <el-badge :value="3" class="item">
        <el-button size="small">回复</el-button>
      </el-badge>
    </el-row>
  </div>
</template>
<script>
export default {
  name: 'index',
  data() {
    return {
      msg: 'shay',
      date: '',
      radio: '1',
      value1: true,
      value2: true,
      value3: '',
      select1: '',
      select2: '',
      activeName: 'first',
      currentPage: 1
    }
  },
  mounted () {
    this.$confirm('ddd')
  },
  methods: {
    handleSizeChange() {},
    handleCurrentChange() {}
  }
}
</script>

